<template>
  <div id="vant-swipe" v-if="isShow" :style="{height: `${height}px`}">
    <van-swipe :autoplay="3000" class="advertising">
        <van-swipe-item v-for="(item, index) in list" :key="index" class="advertising-list">
            <img class="swipe-img" v-lazy="item.ImgUrl" v-if="item.ImgUrl"/>
            <span v-if="item.CarouselTxt">{{item.CarouselTxt}}</span>
        </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'vant'

Vue.use(Swipe).use(SwipeItem).use(Lazyload)

export default {
    name: 'VantSwipe',
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        height: {
            type: Number,
            default: 45
        }
    },
    data() {
        return {
            isShow: this.list.length > 0
        }
    }
}
</script>

<style lang="scss" scoped>
    .advertising {
        height: 45px;
        background: linear-gradient(#ffd1c0, #ffe2d1);
        width: 100%;

        .advertising-list {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            font-size: 20px;
            color: #23527c;
            font-weight: bold;

            .swipe-img {
                height: 100%;
                width: 100%;
            }
        }
    }
</style>>